<div class="am-cf am-padding-xs am-padding-bottom-0">
	<div class="am-fl am-cf">
		<strong class="am-text-primary am-text-lg">Spring Cloud Zuul网关路由限流管理工具</strong> / <small>Zuul id限流配置</small>
	</div>
	<div class="am-fr am-cf">
		<button type="button" class="am-btn am-btn-xs am-btn-primary" id="toAdd" data-am-modal="{target: '#editModal'}">
			<i class="am-icon-plus"></i>&nbsp;新增
		</button>
	</div>
</div>
<hr class="am-margin-xs"/>
<form class="am-form am-form-horizontal am-margin-right-sm" role="form" id="queryForm">
	<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-3 am-thumbnails">
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">Zuul服务id：</label>
				<div class="am-u-sm-8 am-padding-left-0 am-padding-right-0">
					<input type="text" class="am-form-field" name="zuulId" />
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<div class="am-u-sm-12 am-padding-left-xs am-padding-right-0">
					<button type="button" id="queryBtn" class="am-btn am-btn-sm am-btn-primary"><i class="am-icon-search"></i>&nbsp;查询</button>
					<button type="reset" class="am-btn am-btn-sm am-btn-default"><i class="am-icon-undo"></i>&nbsp;重置</button>
				</div>
			</div>
		</li>
	</ul>
</form>
<hr class="am-margin-xs"/>
<div class="am-scrollable-horizontal">
	<table class="am-table am-table-bordered am-table-striped am-table-hover am-table-compact am-table-centered am-margin-bottom-xs">
		<thead>
			<tr class="am-text-nowrap">
				<th>Zuul服务id</th>
				<th>每秒限制数/获取许可数</th>
				<th>获取许可超时时间</th>
				<th>超过限流错误码 / 错误提示</th>
				<th>是否启用</th>
				<th>操作</th>
			</tr>
			<tr class="am-hide" id="tableTmpl">
				<td class="am-text-nowrap">{{zuulId}}</td>
				<td class="am-text-nowrap">{{permitsPerSecond}} / {{permits}}</td>
				<td class="am-text-nowrap">{{timeout}} {{timeUnitTxt}}</td>
				<td class="am-text-nowrap">{{statusCode}} / {{errorCause}}</td>
				<td class="am-text-nowrap">{{enableTxt}}</td>
				<td>
					<div class="am-btn-toolbar">
						<div class="am-btn-group am-btn-group-xs">
							<button type="button" class="am-btn am-btn-primary toEnable" data-id="{{id}}"><i class="am-icon-edit"></i>&nbsp;启用</button>
							<button type="button" class="am-btn am-btn-primary toDisable" data-id="{{id}}"><i class="am-icon-edit"></i>&nbsp;禁用</button>
							<button type="button" class="am-btn am-btn-primary toUpdate"><i class="am-icon-edit"></i>&nbsp;修改</button>
							<button type="button" class="am-btn am-btn-primary toDelete" data-id="{{id}}"><i class="am-icon-trash-o"></i>&nbsp;删除</button>
						</div>
					</div>
				</td>
			</tr>
		</thead>
		<tbody id="tableBody"></tbody>
	</table>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="editModal">
	<div class="am-modal-dialog">
		<div class="am-modal-hd">编辑限流配置信息
			<a href="javascript:void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
		</div>
		<div class="am-modal-bd">
			<hr/>
			<form class="am-form am-form-horizontal am-margin-right-sm" role="form" id="editForm">
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">Zuul服务id：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="zuulId" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">每秒限制数：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="permitsPerSecond" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">获取许可数：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="permits" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">获取许可超时时间：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="timeout" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">获取许可超时时间单位：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<select class="am-form-field" name="timeUnit">
							<option value="MILLISECONDS">毫秒</option>
							<option value="SECONDS">秒</option>
							<option value="MINUTES">分钟</option>
						</select>
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">超过限流错误码：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="statusCode" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">超过限流错误原因：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="errorCause" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">是否启用：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<select class="am-form-field" name="enable">
							<option value="true">启用</option>
							<option value="false">禁用</option>
						</select>
					</div>
				</div>
				<input type="hidden" name="id" />
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<div class="am-u-sm-offset-4 am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<button type="button" class="am-btn am-btn-sm am-btn-primary" id="saveBtn">
							<i class="am-icon-save"></i>&nbsp;确定
						</button>
						<button type="button" class="am-btn am-btn-sm am-btn-default" data-am-modal-close>
							<i class="am-icon-undo"></i>&nbsp;返回
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script>
(function(){
	$('#queryBtn').on('click', function(){
		$('#queryForm').ajaxSubmit({
			url: basePath + 'zuul/id',
			type: 'get',
			dataType: 'json',
			success: function(data){
				$('#tableBody').empty();
				if(data.limiters.length < 1){
					$('#tableBody').append('<tr><td colspan="6">暂时没有符合条件的数据</td></tr>');
					return false;
				}
				for(var i=0; i<data.limiters.length; i++){
					data.limiters[i].enableTxt = $.enums('enable.' + data.limiters[i].enable);
					data.limiters[i].timeUnitTxt = $.enums('timeunit.' + data.limiters[i].timeUnit);
					var html = $.format($('#tableTmpl').html(), data.limiters[i]);
					$('#tableBody').append('<tr>' + html + '</tr>');
					$('#tableBody tr:last .toUpdate').data('obj', data.limiters[i]);
				}
			}
		});
	});
	
	$('#saveBtn').on('click', function(){
		$('#editForm').ajaxSubmit({
			url: basePath + 'zuul/id',
			type: 'post',
			dataType: 'json',
			success: function(data){
				$('#editModal').modal('close');
				layer.confirm('操作成功，是否需要刷新？', {icon: 1, title:'提示'}, function(index){
					$('#queryBtn').trigger('click');
					layer.close(index);
				});
			}
		});
	});
	
	$('#tableBody').on('click', '.toEnable', function(){
		var id = $(this).data('id');
		enable(id, true);
	});
	
	$('#tableBody').on('click', '.toDisable', function(){
		var id = $(this).data('id');
		enable(id, false);
	});
	
	function enable(id, enable){
		layer.confirm('是否确认要' + $.enums('enable.' + enable) + '此项配置？', {icon: 3, title:'提示'}, function(index){
			$.ajax({
				url: basePath + 'zuul/id/' + id,
				type: 'put',
				data: {
					enable: enable
				},
				dataType: 'json',
				success: function(data){
					layer.confirm('操作成功，是否需要刷新？', {icon: 1, title:'提示'}, function(callbackIndex){
						$('#queryBtn').trigger('click');
						layer.close(callbackIndex);
					});
				}
			});
			layer.close(index);
		});
	}
	
	$('#toAdd').on('click', function(){
		$('#editForm').resetForm();
	});
	
	$('#tableBody').on('click', '.toUpdate', function(){
		var item = $(this).data('obj');
		$('#editModal').modal('open');
		$('#editForm').find('input, select').each(function(){
			$(this).val(item[$(this).attr('name')] + '');
		});
	});
	
	$('#tableBody').on('click', '.toDelete', function(){
		var id = $(this).data('id');
		layer.confirm('是否确认要删除此项配置？', {icon: 3, title:'提示'}, function(index){
			$.ajax({
				url: basePath + 'zuul/id/' + id,
				type: 'delete',
				dataType: 'json',
				success: function(data){
					layer.confirm('操作成功，是否需要刷新？', {icon: 1, title:'提示'}, function(callbackIndex){
						$('#queryBtn').trigger('click');
						layer.close(callbackIndex);
					});
				}
			});
			layer.close(index);
		});
	});
	
	$(function(){
		$('#queryBtn').trigger('click');
	});
})();
</script>
</body>
</html>
